import React, { memo, useEffect, } from 'react'
import HomeWrapper from './style'
import HomeBanner from './home-banner'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { fetchHomeDataAction } from '@/store/modules/home'
import Sectionv1 from './section-v1'
import { isNotEmpty } from '@/utils'
import Sectionv2 from './section-v2'
import HomeLongfor from './home-longfor'
import Sectionv3 from './section-v3'
import useFixedHeader from '@/hooks/useFixedHeader'

const Home = memo(() => {
  const dispatch = useDispatch()
  // 获取store中的home界面 所有板块 数据
  const {goodPriceInfo, highScoreInfo, discountInfo, hotRecommendInfo, plusInfo, longforInfo} = useSelector(({home}) => ({
    goodPriceInfo: home.goodPriceInfo,
    highScoreInfo: home.highScoreInfo,
    discountInfo: home.discountInfo,
    hotRecommendInfo: home.hotRecommendInfo,
    plusInfo: home.plusInfo,
    longforInfo: home.longforInfo
  }), shallowEqual)
  // 使用fixed导航栏
  useFixedHeader(true)
  // 模拟生命周期组件挂载后 请求home界面所有板块数据内容
  useEffect(() => {
    dispatch(fetchHomeDataAction())
  }, [dispatch])
  return (
    <HomeWrapper>
      <HomeBanner/>
      <div className='contain'>
        {/* 折扣推荐 */}
        {isNotEmpty(discountInfo) && <Sectionv2 dataInfo = {discountInfo}/>}
        {/* 热门推荐 */}
        {isNotEmpty(hotRecommendInfo) && <Sectionv2 dataInfo = {hotRecommendInfo}/>}
        {/* 向往城市 */}
        {isNotEmpty(longforInfo) && <HomeLongfor dataInfo = {longforInfo}/>}
        {/* 高性价比 */}
        {isNotEmpty(goodPriceInfo) && <Sectionv1 dataInfo = {goodPriceInfo}/>}
        {/* 高分好评 */}
        {isNotEmpty(highScoreInfo) && <Sectionv1 dataInfo = {highScoreInfo}/>}
        {/* plus房源 */}
        {isNotEmpty(plusInfo) && <Sectionv3 dataInfo = {plusInfo}/>}
      </div>
    </HomeWrapper>
  )
})

export default Home